SearchUnit Documentation: Javascript Usage: How do I...: ...provide a search cloud

.NET Version Note

If you are using .NET 5 or .NET 2, you must also add one these lines in the example below

Javascript
    
keyotiSearch.setServiceType('core'); //for .NET 5

keyotiSearch.setServiceType('asmx'); //for .NET 2

Search/Keyword Cloud

A search (tag or word) cloud is a collection of common search terms that users of the site have searched for. It enables other users to see popular search terms (note that only words that are in the search lexicon will be shown in the cloud, preventing inappropriate searches being shown). To add a search cloud to the page add a DIV with id='sew_searchCloudControl'.

HTML
    
<div id="sew_searchCloudControl"></div>

Item template, properties and styling

By default the items inside of the cloud control can be styled with CSS, the elements are written like this:

HTML
    


    <div id="sew_searchCloudControl" style="visibility: visible;">
        <span class="sew_searchCloud">
            <span class="sew_searchCloudItem" style="font-size: 0.85em;"><a onclick="keyotiSearchBox.doSearch('car', 1)" href="#stayhere">car</a></span>
            <span class="sew_searchCloudItem" style="font-size: 0.8em;"><a onclick="keyotiSearchBox.doSearch('truck', 1)" href="#stayhere">truck</a></span>
        </span>
    </div>
    

Properties

keyotiSearchCloud.fontSizeUnits - maximum and minimum font sizes are defined in Javascript (CSS font units, eg. 'em')
keyotiSearchCloud.minimumFontSize - smallest size possible for text in the cloud (least popular terms)
keyotiSearchCloud.maximumFontSize - largest size possible for text in the cloud (most popular terms)
keyotiSearchCloud.numberOfQueriesToGet - number of query terms to show in the cloud

To further control the appearance of items in the cloud, specify a template (add the following to the page outside of the sew_searchCloudControl DIV:

HTML
    


<!-- It is important that this template be specified outside of the sew_searchCloudControl DIV -->
<span id="sew_searchCloudItemTEMPLATE" >
    <a href="#stayhere" onclick="keyotiSearch.search('${QueryEscaped}', 1)">${Query}</a>
</span>

If the index directory is not the default Keyoti_Search_Index then it is necessary to point to the folder (use the tilda ~ notation to point to the application root, or use an absolute file path);

Javascript / HTML
    


    ...
        <script type="text/javascript">
            keyotiSearch.indexDirectory = "~/myindexdirectory";
        </script>
    ...

Settings

Javascript / HTML : search.html
    


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <link href="Keyoti_SearchEngine_Web_Common/SearchUnit.css" rel="stylesheet" />
        <script src="Keyoti_SearchEngine_Web_Common/SearchUnit.js"></script>
    </head>
    <body>
        <div id="sew_searchBoxControl"></div>
        <div id="sew_searchResultControl"></div>
    </body>
</html>

Javascript / HTML : index.html
    


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <link href="Keyoti_SearchEngine_Web_Common/SearchUnit.css" rel="stylesheet" />
        <script src="Keyoti_SearchEngine_Web_Common/SearchUnit.js"></script>
        <script type="text/javascript">
            keyotiSearchBox.resultURL = "search.html";
        </script>
    </head>
    <body>
        <div id="sew_searchBoxControl"></div>
    </body>
</html>